<template>
    <div>
        <!--操作区-->
        <div>
            <el-col :span="2">
                <el-button type="primary" @click="jumpAdd()">添加</el-button>
            </el-col>
            <el-col :span="2">
                <el-button type="warning" @click="jumpEdit()">修改</el-button>
            </el-col>
            <el-col :span="2">
                <el-button type="danger" @click="handleDelete()">删除</el-button>
            </el-col>
        </div>
        <!--权限列表表格显示-->
        <div>
            <el-table
                :data="treeData"
                style="width: 100%; margin-bottom: 20px"
                row-key="Id"
                border
                default-expand-all
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="Id" label="编号" width="150"> </el-table-column>
                <el-table-column prop="Name" label="权限名称" width="180"> </el-table-column>
                <el-table-column prop="Identifier" label="标识" width="180">
                    <template slot-scope="scope">
                        {{ scope.row.Identifier == null ? '-' : scope.row.Identifier }}
                    </template>
                </el-table-column>
                <el-table-column prop="UrlPath" label="vue的路由" width="180">
                    <template slot-scope="scope">
                        {{ scope.row.UrlPath == null ? '-' : scope.row.UrlPath }}
                    </template>
                </el-table-column>
                <el-table-column prop="ApiAction" label="api的请求路径" width="180">
                    <template slot-scope="scope">
                        {{ scope.row.ApiAction == null ? '-' : scope.row.ApiAction }}
                    </template>
                </el-table-column>
                <el-table-column prop="Icon" label="图标" width="50">
                    <template slot-scope="scope">
                        <span v-if="scope.row.Icon == null">-</span>
                        <i v-else :class="scope.row.Icon"></i>
                    </template>
                </el-table-column>
                <el-table-column prop="Describe" label="描述" width="180">
                    <template slot-scope="scope">
                        {{
                            scope.row.Describe == null
                                ? '-'
                                : scope.row.Describe.length > 15
                                ? scope.row.Describe.substr(0, 12) + '...'
                                : scope.row.Describe
                        }}
                    </template>
                </el-table-column>
                <el-table-column prop="Category" label="权限的类型" width="90">
                    <template slot-scope="scope">
                        <span v-if="scope.row.Category == 10">菜单</span>
                        <span v-if="scope.row.Category == 20">目录</span>
                        <span v-if="scope.row.Category == 30">按钮</span>
                    </template>
                </el-table-column>
                <el-table-column prop="OrderSort" label="排序值" width="100"> </el-table-column>
                <el-table-column prop="Status" label="状态" width="100">
                    <template slot-scope="scope">
                        {{ scope.row.Status == null ? '-' : scope.row.Status }}
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--添加修改弹出表单-->
        <el-dialog :title="FormTitle" :visible.sync="FormVisible">
            <el-form :model="form">
                <el-form-item label="权限名称">
                    <el-input v-model="form.Name"></el-input>
                </el-form-item>
                <el-form-item label="父级信息">
                    <el-cascader
                        v-model="form.Pids"
                        :options="treeData"
                        :props="{ value: 'Id', label: 'Name', children: 'children', checkStrictly: true }"
                        clearable
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="标识">
                    <el-input v-model="form.Identifier"></el-input>
                </el-form-item>
                <el-form-item label="vue路由">
                    <el-input v-model="form.UrlPath"></el-input>
                </el-form-item>
                <el-form-item label="API接口路径">
                    <el-input v-model="form.ApiAction"></el-input>
                </el-form-item>
                <el-form-item label="图标">
                    <el-tooltip
                        class="item"
                        effect="dark"
                        content="这玩意需要指定的值，你自己在element-ui的官网上找下来复制"
                        placement="top"
                    >
                        <el-input v-model="form.Icon"></el-input>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input type="textarea" v-model="form.Describe" show-word-limit maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="权限类型">
                    <!--后期可以改进为后台通过反射来获取-->
                    <el-radio-group v-model="form.Category">
                        <el-radio :label="10">菜单</el-radio>
                        <el-radio :label="20">目录</el-radio>
                        <el-radio :label="30">按钮</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序值">
                    <el-input v-model.number="form.OrderSort"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="form.Status" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="FormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleJudge">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
import { PermissionAdd, PermissionsAll, PermissionEdit, PermissionDelete } from '@/api/Permissions.js';
export default {
    data() {
        return {
            treeData: [],
            FormVisible: false,
            form: {},
            FormTitle: '',
            multipleSelection: []
        };
    },
    methods: {
        //权限显示
        getTreeData() {
            PermissionsAll().then((res) => {
                this.treeData = res.Data;
                //console.log(this.treeData);
            });
        },
        //判断执行修改还是添加
        handleJudge() {
            let array = [];
            array = this.form.Pids;
            //判断array是否是一个数字
            if (!isNaN(this.form.Pids)) {
                this.form.Pid = this.form.Pids[0];
            } else {
                //则array是个数组
                this.form.Pid = this.form.Pids[this.form.Pids - 1];
            }
            //this.form.Pid=array[array.length-1]
            console.log('父级数组集合长度为：' + this.form.Pids.length);
            console.log(this.form);
            if (this.FormTitle == '添加权限') {
                this.handleAdd();
            } else if (this.FormTitle == '修改权限') {
                this.handleEdit();
            }
            console.log(this.form);
        },
        //添加弹出
        jumpAdd() {
            this.form = {};
            this.FormTitle = '添加权限';
            this.FormVisible = true;
        },
        //添加操作
        handleAdd() {
            PermissionAdd(this.form).then((res) => {
                if (res.Code == 200) {
                    this.$message.success(res.Message);
                    this.getTreeData();
                    this.FormVisible = false;
                } else {
                    this.$message.error(res.Message);
                }
            });
        },
        //修改弹出
        jumpEdit() {
            this.form = {};
            this.FormTitle = '修改权限';
            //判断是否存在多选框是否有被选中的
            if (this.multipleSelection == null) {
                this.$message.warning('请选择一项再进行修改');
                return;
            } else if (this.multipleSelection.length != 1) {
                this.$message.warning('只能选择一项权限信息进行修改');
                return;
            }
            this.form = this.multipleSelection[0];
            //确保ID值能反填上
            this.form.Pids = [this.form.Pid];
            this.FormVisible = true;
        },
        //修改操作
        handleEdit() {
            PermissionEdit(this.form).then((res) => {
                if (res.Code == 200) {
                    this.$message.success(res.Message);
                    this.getTreeData();
                    this.FormVisible = false;
                } else {
                    this.$message.error(res.Message);
                }
            });
        },
        //删除操作
        handleDelete() {
            //判断是否存在多选框是否有被选中的
            if (this.multipleSelection == null) {
                this.$message.warning('请选择一项再进行删除');
                return;
            } else if (this.multipleSelection.length != 1) {
                this.$message.warning('只能选择一项权限信息进行删除');
                return;
            }

            //获取ID
            let data = { id: this.multipleSelection[0].Id };

            this.$confirm('你确定要删除该权限信息?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    PermissionDelete(data).then((res) => {
                        if (res.Code == 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getTreeData();
                        } else {
                            this.$message.error(res.Message);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        //多选
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    },
    created() {
        this.getTreeData();
    },
    computed: {
        //计算数组长度
        arrayLength() {
            return this.multipleSelection.length;
        }
    }
};
</script>
